/*
* @Author: zhangsai
* @Date: 2018/2/26
* @Last Modified by: zhangsai
* @Last Modified time: 2018/2/26
* @description: 红点
*/
<template>
    <div class="ca-tab__title">
        <div :class="getTitleStyle">
            <i :class="getRedDotStyle" v-if="showDot"></i>
            {{label}}
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data() {
        return {}
    },
    props: {
        label: {
            type: String,
            default: '请输入tab名称',
        },
        //是否显示小红点
        showDot: {
            type: Boolean,
            default: false,
        },
        //小红点类型0：详情 1列表
        type: {
            type: Number,
            default: 0,
        }
    },
    computed: {
        getTitleStyle() {
            if (this.type === 0) {
                return 'ca-tab__title--detail';
            } else if (this.type === 1) {
                return 'ca-tab__title--list';
            }
        },
        getRedDotStyle() {
            if (this.type === 0) {
                return 'ca-tab__title__red-dot--detail';
            } else if (this.type === 1) {
                return 'ca-tab__title__red-dot--list';
            }
        }
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@mixin red-dot {
    display: inline-block;
    position: absolute;
    background-color: #fc1f1f;
    border-radius: 50%;
}

.ca-tab__title {
    position: relative;
    .ca-tab__title--detail {
        @extend .ca-tab__title;
        font-size: 16px;
    }
    .ca-tab__title--list {
        @extend .ca-tab__title;
    }

    .ca-tab__title__red-dot--detail {
        @include red-dot;
        width: 9px;
        height: 9px;
        right: -10px;
        top: 10px;
    }
    .ca-tab__title__red-dot--list {
        @include red-dot;
        width: 5px;
        height: 5px;
        right: 10px;
        top: 1px;
    }
}
</style>
